<template>
  <el-form :model="addForm" label-width="80px" :show-message="false" :rules="addFormRules" ref="addForm">
    <el-row>
      <el-col :span="8">
        <el-form-item label="品牌" prop="carBrandId">
          <el-select clearable v-model="addForm.carBrandId" placeholder="品牌" filterable @change="brandChangeHandle">
            <el-option v-for="item in brandList" :key="item.id" :value="item.id" :label="item.name" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="车系" prop="carSeriesId">
          <el-select clearable v-model="addForm.carSeriesId" placeholder="车系" filterable @change="seriesChangeHandle">
            <el-option v-for="item in vehicleList" :key="item.id" :value="item.id" :label="item.name" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="年款" prop="timeType">
          <el-select clearable v-model="addForm.timeType" filterable placeholder="年款" @change="timeTypeChangeHandle">
            <el-option v-for="item in timeTypeList" :key="item" :value="item" :label="item"/>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <el-form-item label="车型" prop="carModelId">
          <el-select clearable v-model="addForm.carModelId" filterable placeholder="车型" >
            <el-option v-for="item in modelList" :key="item.id" :value="item.id" :label="item.modelName" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="门店" prop="storeId">
          <job-shop v-model="addForm.storeId" defaultStoreId placeholder="所属门店" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item label="对比图" prop="context">
      <tinymce v-model="addForm.context" editor-image-vist :height="500" />
    </el-form-item>
    <el-row>
      <el-col :span="24" align="center">
        <el-button type="primary" @click="onSubmit">保存</el-button>
      </el-col>
    </el-row>

  </el-form>
</template>

<script>
  import { JobShop } from '@/components/index'
  import {
    getAllBrand,
    getSeries,
    getModelTimeType,
    getModelRank
  } from '@/api/after-sale/systemManage/carModel'
  import Tinymce from '@/components/Tinymce'

  export default {
    components: { JobShop, Tinymce },
    props: {
      editData: {
        type: Object,
        default: () => ({})
      }
    },
    data() {
      const addForm = {
        carBrandId: '',
        carSeriesId: '',
        timeType: '',
        carModelId: '',
        storeId: '',
        context: ''
      }
      if (this.editData) {
        Object.keys(addForm).forEach(key => {
          addForm[key] = this.editData[key]
        })
      }

      return {
        addForm,
        addFormRules: {
          storeId: [{ required: true, message: '请选择门店' }],
          carBrandId: [{ required: true, message: '请选择品牌' }],
          carSeriesId: [{ required: true, message: '请选择车系' }],
          timeType: [{ required: true, message: '请选择年款' }],
          carModelId: [{ required: true, message: '请选择车型' }]
        },
        brandList: [],
        vehicleList: [],
        timeTypeList: [],
        modelList: []
      }
    },
    computed: {

    },
    async created() {
    },
    methods: {
      onSubmit() {
        this.$refs.addForm.validate(valid => {
          if (valid) {
            const data = { ...this.addForm }
            if (this.editData) {
              data.id = this.editData.id
            }
            this.$emit('operate', data, data.id ? 'update' : 'add')
          }
        })
      },
      brandChangeHandle(carBrandId) {
        const addForm = this.addForm
        addForm.carSeriesId = ''
        addForm.timeType = ''
        addForm.carModelId = ''

        this.vehicleList = []
        this.timeTypeList = []
        this.modelList = []
        if (carBrandId) {
          this.requestVehicleList(carBrandId)
        }
      },
      seriesChangeHandle(carSeriesId) {
        const { carBrandId } = this.addForm
        this.addForm.timeType = ''
        this.addForm.carModelId = ''
        this.timeTypeList = []
        this.modelList = []
        if (carSeriesId) {
          this.requestModelTimeType(carBrandId, carSeriesId)
        }
      },
      timeTypeChangeHandle(timeType) {
        const { carBrandId, carSeriesId } = this.addForm
        this.addForm.carModelId = ''
        this.modelList = []
        if (timeType) {
          this.requestCarModelList(carBrandId, carSeriesId, timeType)
        }
      },
      // 请求品牌
      requestCarBrandList() {
        getAllBrand().then(({ success, data }) => {
          if (success) {
            this.brandList = data || []
          }
        })
      },
      // 请求车系
      requestVehicleList(brandId) {
        getSeries(brandId).then(({ success, data }) => {
          if (success) {
            this.vehicleList = data || []
          }
        })
      },
      // 请求年款
      requestModelTimeType(brandId, seriesId) {
        getModelTimeType(brandId, seriesId).then(({ success, data }) => {
          if (success) {
            this.timeTypeList = data || []
          }
        })
      },
      // 请求车型
      requestCarModelList(brandId, seriesId, timeTypeId) {
        getModelRank(brandId, seriesId, timeTypeId).then(({ success, data }) => {
          if (success) {
            this.modelList = data || []
          }
        })
      }
    },
    mounted() {
      this.requestCarBrandList()

      if (this.editData) {
        const { carBrandId, carSeriesId, timeType } = this.editData
        this.requestVehicleList(carBrandId)
        this.requestModelTimeType(carBrandId, carSeriesId)
        this.requestCarModelList(carBrandId, carSeriesId, timeType)
      }
    }
  }
</script>
<style lang="scss" scoped>
</style>

